import React, { useRef } from 'react';
import styles from './index.less';
import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useEffect, useState } from 'react';
import axios from 'axios';
import { Button, Modal } from 'antd';
import { Checkbox, Form, Input } from 'antd';



type FieldType = {
  id: number,
  house_name: string;
  house_address: string;
  house_price: number;
  house_date: Date;
  people: string;

};

interface DataType {
  id: number,
  house_name: string;
  house_address: string;
  house_price: number;
  house_date: Date;
  people: string;
}



type Props = {}

const index = (props: Props) => {
  //定义form
  const [form] = Form.useForm();
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '楼盘名称',
      dataIndex: 'house_name',
      key: 'house_name',
    },
    {
      title: '详细地址',
      dataIndex: 'house_address',
      key: 'house_address',
    },
    {
      title: '价格',
      dataIndex: 'house_price',
      key: 'house_price',
    },
    {
      title: '更新时间',
      dataIndex: 'house_date',
      key: 'house_date',
    },
    {
      title: '状态',
      dataIndex: '',
      key: '',
    },
    {
      title: '经纪人',
      dataIndex: 'people',
      key: 'people',
    },

    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a>详情</a>
          <a onClick={() => edit(record)}>编辑</a>
          <a onClick={() => del(record.id)}>删除</a>
          <a>房源已成交</a>
        </Space>
      ),
    },
  ];

  //删除
  const del = async (id: any) => {

    await axios.post('http://127.0.0.1:7001/house/deleteHouse', { id: id })
      .then(reponse => {
        console.log(reponse);
      })
  }

  // 新增
  const [isTitle, setTitle] = useState('')
  const add = () => {
    showModal();
    setTitle('新增');
    form.setFieldsValue({
       id:'',
       house_name:'',
       house_address:'',
       house_price:'',
       house_date:'',
       people:''
    })
  }
  // 编辑
  const edit = (record: any) => {
    showModal();
    setTitle('编辑');
    form.setFieldsValue({
       id:record.id,
       house_name:record.house_name,
       house_address:record.house_address,
       house_price:record.house_price,
       house_date:record.house_date,
       people:record.people
    })
  }

  

  // 判断是新增还是编辑
  if (isTitle === '编辑') {

  }

  //表单提交
  const onFinish = async (values: any) => {
    console.log('Success:', values);
    if (isTitle === '新增') {
      await axios.post('http://127.0.0.1:7001/house/addHouse', { id: values.id, house_name: values.house_name, house_address: values.house_address, house_price: values.house_price, house_date: values.house_date, people: values.people }).then(res => {
        console.log(res);
      })
    }
    else if (isTitle === '编辑') {
      await axios.post('http://127.0.0.1:7001/house/editHouse', { id: values.id, house_name: values.house_name, house_address: values.house_address, house_price: values.house_price, house_date: values.house_date, people: values.people }).then(res => {
        console.log(res);
      })
    }
  };

  //搜索
  const inputDom=useRef<HTMLInputElement>(null)
  
  const Search=()=>{
    const newArr:any = list.filter((item:any)=>item.house_name.includes(inputDom.current?.value as any))
    setList(newArr);
  }


  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const [list, setList] = useState([]);
  useEffect(() => {
    //获取数据
    const getlist = async () => {
      await axios.get('http://127.0.0.1:7001/house/getHouseList').then((res) => {
        // console.log(res);
        setList(res.data.data)
      })

    }
    getlist()

  }, [])
  //弹出框
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };



  return (
    <div className={styles.box}>

      <p className={styles.pp}>
        <button className={styles.blue}>新房售卖</button>
        <button>二手房售卖</button>
        <button>房屋租赁</button>
      </p>
      <p className={styles.two}>
        <select name="" id="">
          <option value="">请选择省份</option>
        </select>
        <select name="" id="">
          <option value="">请选择城市</option>
        </select>
        <select name="" id="">
          <option value="">请选择区县</option>
        </select>
        <input type="text" placeholder='关键字' ref={inputDom}/>
        <button onClick={Search}>搜索</button>
      </p>
      <Button type="primary" onClick={add}>新增</Button>
      <Table columns={columns} dataSource={list} />
      {/* 弹出框 */}

      <Modal title={isTitle} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form
          form={form}
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            label="序号"
            name="id"
            rules={[{ required: true, message: 'Please input your id!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="楼盘名称"
            name="house_name"
            rules={[{ required: true, message: 'Please input your house_name!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="详细地址"
            name="house_address"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="价格"
            name="house_price"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="更新时间"
            name="house_date"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="经纪人"
            name="people"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>


          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default index